<!-- 游戏路径+试玩路径 -->
<template>
  <el-dialog :model-value="props.show" :title="props.isShowUrl?'GameUrl':'试玩路径'" width="55%" :close-on-click-modal="false" :close-on-press-escape="false"
    top="25vh" @close="onHideDetails">
    <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" :rules="rules">
      <form-item title="GameUrl" :pass="true" value="game_url" v-if="props.isShowUrl">
        <el-input class="imWidth100" type="text" v-model="ruleForm.game_url" placeholder="请输入GameUrl" clearable />
      </form-item>
      <form-item title="试玩路径" value="trial_path" v-else>
        <el-input class="imWidth100" type="text" v-model="ruleForm.trial_path" placeholder="请输入完整试玩路径：https://www.baidu.com" clearable />
      </form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="onHideDetails">取 消</el-button>
        <el-button type="primary" @click="gameSet(ruleFormRef)">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, watch, computed, unref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import FormItem from '@/components/FormItem/FormItem.vue'
import { editGame } from '@/api/game'
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  isShowUrl: {
    type: Boolean,
    default: () => {
      return true
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

watch(
  () => [props.checkedItem,props.show],
  async (value) => {
    if (value[0]) {
      ruleForm.value = Object.assign(ruleForm.value, props.checkedItem)
    }
  }
)

// 设置
interface RuleForm {
  id: number
  game_id: number
  game_type: number
  show: number
  game_name: string
  game_name_en: string
  game_url: string
  trial_path: string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
  id: 0,
  game_id: 0,
  game_type: 0,
  show: 0,
  game_name: '',
  game_name_en: '',
  game_url: '',
  trial_path: ''
})
const rules = reactive<FormRules<RuleForm>>({
  game_url: [{ required: true, message: '请输入GameUrl', trigger: 'blur' }],
})
const gameSet = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let res = await editGame(unref(ruleForm))
      ElMessage.success('修改成功')
      emit('onHideDetails', true)
    }
  })
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>

<style scoped lang="scss"></style>
